<template>
	<view class="footerBtn" :style="{ background: bgcColor }" @click="clickBtn">
		<view class="footerBox" :style="{ background: bgcColor }"></view>
		<view class="footerFixed" :style="{ background: bgcColor }">
			<view
				:class="['footer_btn', disable && 'footer_btn_inActive']"
				:style="{ width: width }"
			>
				<slot></slot>
				{{ name }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watchEffect } from 'vue';
const props = defineProps({
	name: {
		type: String,
		required: true
	},
	//是否可点击
	btnDisable: {
		type: Boolean,
		default: false
	},
	//背景色
	bgcColor: {
		type: String,
		default: '0E0E0E'
	},
	width: {
		type: String,
		default: '400rpx'
	}
});
const disable = ref(false);

const emit = defineEmits(['clickBtn']);
const clickBtn = () => {
	// if (disable.value) {
	// 	return;
	// }
	emit('clickBtn');
};

watchEffect(() => {
	disable.value = props.btnDisable;
});
</script>

<style lang="scss">
.footerBtn {
	width: 100%;
	z-index: 10 !important;

	.footerBox {
		width: 100%;
		/* #ifdef H5 */
		height: 152rpx;
		/* #endif */
		/* #ifndef H5 */
		height: calc(env(safe-area-inset-bottom) + 152rpx);
		/* #endif */
		background-color: #0e0e0e;
	}

	.footerFixed {
		position: fixed;
		background-color: #0e0e0e;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifdef H5 */
		height: 120rpx;
		/* #endif */
		/* #ifndef H5 */
		height: calc(env(safe-area-inset-bottom) + 120rpx);
		/* #endif */
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 16rpx 0;
		box-sizing: border-box;
		z-index: 10 !important;
	}

	.footer_btn {
		width: 400rpx;
		height: 88rpx;
		box-sizing: border-box;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 32rpx;
		color: #524630;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer_btn_inActive {
		opacity: 0.5;
	}
}
</style>
